<template>
  <view class="">
    <u-navbar height="50" title="发布详情" title-size="36"></u-navbar>
    <view class="" style="padding: 20rpx">
      <view class="info_box">
        <view v-if="orderInfo.status == 0" class="box-title"> 待支付</view>
        <view v-if="orderInfo.status == 10" class="box-title">
          报名中
          <view class="box-title-rig"> 已有{{ orderInfo.enrollCount }}人参与报名</view>
        </view>
        <view v-if="orderInfo.status == 20" class="box-title">
          选定中
          <view class="box-title-rig"> 已有{{ orderInfo.enrollCount }}人参与报名</view>
        </view>
        <view v-if="orderInfo.status == 30" class="box-title">
          待接单
          <view class="box-title-rig"> 剩余1天20小时35分</view>
        </view>
        <view v-if="orderInfo.status == 40" class="box-title"> 建设中</view>
        <view v-if="orderInfo.status == 50" class="box-title"> 验收中</view>
        <view v-if="orderInfo.status == 41" class="box-title"> 整改中</view>
        <view v-if="status == 41" class="rectification">
          验收未通过原因：工程诸多地方尚未完共，需要成后，重新验收
        </view>
        <view v-if="orderInfo.status == 60" class="box-title"> 待评价</view>
        <view v-if="orderInfo.status == 70" class="box-title"> 已完成</view>
        <view v-if="orderInfo.status == 71" class="box-title"> 已终止</view>

        <view class="info_box-title">
          {{ orderInfo.name }}
        </view>
        <view class="info_box-desc-time">
          <view class="info_box-desc"> 项目要求：专业工程队，技术过硬专业工程队技术过硬专</view>
          <!-- <view class="info_box-desc">
						入场日期：{{formatTime(orderInfo.exceptStartTime)}}
						至{{formatTime(orderInfo.exceptEndTime)}}）
					</view> -->
          <view class="info_box-time">
            项目预算：
            <text>¥{{ (orderInfo.budgetPrice * 0.01).toFixed(2) }}</text>
            <!-- <text style="color:#999999">（保证金¥{{(orderInfo.depositPrice * 0.01).toFixed(2)}}）</text> -->
          </view>
        </view>

        <view class="info-floor">
          <text> {{ formatTime(orderInfo.createTime) }}发布</text>
        </view>
      </view>
    </view>
    <view class="construction-team" v-if="orderInfo.status == 10 || orderInfo.status == 20">
      <view
        class="item-title"
        style="position: relative"
        v-if="orderInfo.status == 20"
        @click="routeTo('/other/check-team/check-team?id=' + orderInfo.id + '&isCheck=1')"
      >
        查看项目已报名施工队
        <view class="check-team">
          去选定
          <u-icon name="/static/img/more.png" size="15" style="margin: 8rpx"></u-icon>
        </view>
      </view>
      <p
        v-if="orderInfo.status == 20"
        @click="routeTo('/other/check-team/check-team?id=' + orderInfo.id + '&isCheck=1')"
      >
        注：根据项目报价情况，在参与报名的人员名单中，选定中标的施工队。
      </p>
      <view
        class="team-item1"
        v-if="orderInfo.status == 10"
        @click="routeTo('/other/check-team/check-team?id=' + orderInfo.id + '&isCheck=0')"
      >
        项目报名未停止，暂时无法选定施工队（点击查看）
      </view>

      <view class="team-item" v-if="pickupInfo">
        <view class="team-item-top">
          <view class="team-name" v-if="pickupInfo.resume">
            {{ pickupInfo.resume.name }}
          </view>
          <view class="sign"> 已实名</view>
        </view>

        <view class="team-item-content">
          <view class="info-top-btn" @click="onMobile(pickupInfo)"> 联系TA</view>
          <!-- <text class="">
						项目报价&nbsp;&nbsp;¥{{(pickupInfo.acceptPrice * 0.01).toFixed(2)}}
					</text> -->
          <!-- <view class="money">
						保证金
						<u-icon style="margin: 0 20rpx;" name="/static/img/gzsm.png" size="35"></u-icon>
						¥{{( pickupInfo.depositPrice * 0.01).toFixed(2)}}
					</view> -->
        </view>
        <view class="team-floor" style="color: #999999">
          报名时间:{{ formatTime(pickupInfo.createTime) }}
        </view>
      </view>
    </view>

    <view class="team-item" v-if="orderInfo.selectedEnroll">
      <view class="team-item-top">
        <view class="team-name"> **</view>
        <view class="sign"> 已实名</view>
      </view>

      <view class="team-item-content">
        <view class="info-top-btn"> 施工队</view>
        <!-- <text class="">
					项目报价&nbsp;&nbsp;¥{{(pickupInfo.acceptPrice * 0.01).toFixed(2)}}
				</text> -->
        <!-- <view class="money">
					保证金
					<u-icon style="margin: 0 20rpx;" name="/static/img/gzsm.png" size="35"></u-icon>
					¥{{( pickupInfo.depositPrice * 0.01).toFixed(2)}}
				</view> -->
      </view>
      <view class="team-floor" style="color: #999999">
        报名时间:{{ formatTime(orderInfo.selectedEnroll.createTime) }}
      </view>
    </view>

    <view class="push-step">
      <view class="item-title"> 项目状态时间节点</view>
      <view class="step-box">
        <view class="step-item" v-for="(item, indexx) in step" :key="indexx">
          <view class="icon-line">
            <view v-if="item.operateType == currentStep" class="current-icon"></view>
            <view v-else class="icon"></view>
            <!-- <view class="line" v-if="item.operateType != 0"></view> -->
          </view>
          <view class="content-desc">
            <view class="step-content">{{ item.content }}</view>
            <view class="step-desc">{{ formatTime(item.createTime) }}</view>
          </view>
        </view>
      </view>
    </view>

    <u-popup v-model="show" mode="center" border-radius="15" width="600" height="550">
      <view class="popup-box">
        <view class="popup-top"> 验收不通过原因</view>
        <textarea
          class="text-area"
          name=""
          id=""
          placeholder="请填写验收不通过原因"
          cols="5"
          rows="3"
        ></textarea>
        <p class="popup-tip">
          注：请简明扼要说明项目没有通过验收原因，以便施工方做出有效的整改方案
        </p>
        <view class="popup-btn"> 项目不合格，验收不予通过</view>
      </view>
    </u-popup>

    <!-- <view class="push-info-floor" v-if="status == 6 || status == 9">
			<view class="btn-group" v-if="status == 6">
				<view class="btn accept-btn">
					验收通过
				</view>
				<view class="btn refuse-btn" @click="show = true">
					验收不合格
				</view>
			</view>
			<view v-else class="reply-box">
				<view class="reply-btn">
					立即评论
				</view>
			</view>


		</view> -->
    <view
      v-if="orderInfo.status == 10"
      @click="onStop"
      class="submit-btn"
      style="position: fixed; bottom: 30rpx; left: 50%; transform: translateX(-50%)"
    >
      停止报名
    </view>
    <view
      v-else-if="orderInfo.status == 20"
      @click="onConfirm"
      class="submit-btn"
      style="position: fixed; bottom: 30rpx; left: 50%; transform: translateX(-50%)"
    >
      确认选择中
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      status: 2,
      currentStep: 2,
      orderInfo: '',
      // ,{
      // 	step:1,
      // 	content:"步骤第二步",
      // 	desc:"2020-10-23"
      // },{
      // 	step:2,
      // 	content:"步骤第二步",
      // 	desc:"2020-10-23"
      // }
      step: [],
      show: false,
      checked: false,
      input: '',
      flag: 1,
      imgStyle: {
        width: '12rem'
      },
      addressShow: false,
      current: 0,

      longitude: 0,
      latitude: 0,
      address: '',
      itemList: [],
      boxesList: [],
      pickupInfo: '',
      boxesNum: '' //柜子号
    }
  },
  onLoad(options) {
    this.$u.get('/app-api/construction/project-info/get?id=' + options.id).then((res) => {
      this.orderInfo = res.data
      this.step = res.data.logs.reverse()
      this.step.reverse()
    })

    this.$u
      .get('/app-api/construction/project-enroll/list?projectId=' + options.id)
      .then((res) => {})
  },
  computed: {
    formatTime() {
      return (e) => this.$utils.parseTime(e)
    }
  },
  methods: {
    initData() {
      let self = this
      uni.showLoading({
        title: '正在获取位置信息'
      })
      uni.getLocation({
        type: 'gcj02',
        geocode: true,
        isHighAccuracy: false,
        success: function (res) {
          self.longitude = res.longitude
          self.latitude = res.latitude
          self.$refs.paging.reload()
        },
        fail: function (res) {
          self.$refs.paging.complete()
          self.$u.toast('定位失败，请检查定位权限！')
        },
        complete: function () {
          uni.hideLoading()
        }
      })
    },
    onStop() {
      uni.dialog.confirm('温馨提示', '需要停止报名吗？', () => {
        this.$u
          .put('/app-api/construction/project-info/stop-enroll', {
            projectId: this.orderInfo.id
          })
          .then((res) => {
            uni.navigateBack(0)
          })
      })
    },
    onConfirm() {
      uni.dialog.confirm('温馨提示', '确认选中改施工队吗？', () => {
        this.$u
          .put('/app-api/construction/project-info/select-supplier', {
            projectId: this.orderInfo.id,
            supplierUserId: this.pickupInfo.userId
          })
          .then((res) => {
            uni.navigateBack(0)
          })
      })
    },

    routeTo(url) {
      uni.$on('checkItem', (res) => {
        this.pickupInfo = res
        console.log(this.pickupInfo)
        uni.$off('checkItem')
      })
      uni.navigateTo({
        url
      })
    },
    onMobile(e) {
      console.log(e)
      uni.makePhoneCall({
        phoneNumber: e.contact
      })
    }
  }
}
</script>

<style>
@import url('../../style/btn.css');

page {
  height: 100%;
  background: #eeeeef;
}

.info_box {
  width: 710rpx;
  background-color: #ffffff;
  padding: 15rpx;
  margin-bottom: 20rpx;
}

.box-title {
  font-size: 40rpx;
  color: #0f76bc;
  margin: 10rpx 0;
  position: relative;
}

.rectification {
  padding: 10rpx 20rpx;
  background-color: #f5e1df;
  color: #f54831;
  font-size: 30rpx;
  margin: 10rpx 0;
}

.box-title-rig {
  font-size: 33rpx;
  position: absolute;
  top: 8rpx;
  right: 0;
}

.info_box-title {
  font-size: 35rpx;
  font-weight: 700;
}

.info_box-desc-time {
  margin: 20rpx 0;
  line-height: 55rpx;
  font-size: 32rpx;
}

.info_box-desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info_box-address {
  font-size: 27rpx;
  color: #666666;
}

.info-floor {
  margin: 25rpx 0;
  position: relative;
  font-size: 30rpx;
  color: #999999;
}

.push-step {
  background-color: #fff;
  padding: 20rpx;
}

.item-title {
  font-size: 32rpx;
  margin-bottom: 10rpx;
}

.construction-team {
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 15px;
}

.check-team {
  position: absolute;
  top: 0;
  right: 0;
  color: #999999;
  font-size: 30rpx;
}

.construction-team p {
  color: #999999;
  font-size: 30rpx;
  padding: 15rpx 0;
  border-bottom: #edededed solid 2rpx;
}

.team-item1 {
  height: 220rpx;
  border: #e6e6e6 2rpx solid;
  border-radius: 12rpx;
  text-align: center;
  line-height: 200rpx;
  color: #999999;
}

.team-item {
  height: 260rpx;
  border: #e6e6e6 2rpx solid;
  border-radius: 12rpx;
  line-height: 50rpx;
  padding: 20rpx;
}

.team-item-top {
  border-bottom: 2rpx #ededed solid;
  position: relative;
}

.team-name {
  display: inline-block;
  font-size: 35rpx;
  margin-bottom: 20rpx;
}

.sign {
  display: inline-block;
  font-size: 28rpx;
  padding: 2rpx 18rpx;
  background-color: #8cc340;
  color: #fff;
  border-radius: 30rpx;
  margin-left: 10rpx;
}

.team-item-content {
  margin: 15rpx 0;
  position: relative;
}

.money {
  position: absolute;
  top: 0;
  right: 2rpx;
  display: flex;
  align-items: center;
}

.info-top-btn {
  position: absolute;
  top: 0;
  right: 2rpx;
  display: inline-block;
  font-size: 32rpx;
  padding: 10rpx 20rpx;
  background-color: #0f76bc;
  border-radius: 30rpx;
  color: #fff;
}

.step-box {
  display: flex;
  flex-direction: column-reverse;
}

.step-item {
  display: flex;
  height: 100rpx;
  margin-top: 16rpx;
}

.icon-line {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.current-icon {
  width: 45rpx;
  height: 45rpx;
  border-radius: 45rpx;
  flex-shrink: 0;
  background-color: #0f76bc;
}

.icon {
  width: 32rpx;
  height: 32rpx;
  border-radius: 32rpx;
  flex-shrink: 0;
  background-color: #c4e1f5;
  margin-top: 5rpx;
}

.line {
  width: 2rpx;
  height: 78rpx;
  flex-shrink: 0;
  border-left: #c4e1f5 solid 2rpx;
  margin: 8rpx 0;
}

.content-desc {
  flex: 9;
}

.step-content {
  font-size: 30rpx;
}

.step-desc {
  color: #999999;
  font-size: 25rpx;
  margin: 20rpx 0;
}

.push-info-floor {
  position: fixed;
  bottom: 10rpx;
  width: 100%;
  height: 90rpx;
  background-color: #fff;
  z-index: 999;
}

.btn {
  font-size: 33rpx;
  padding: 10rpx 20rpx;
  border-radius: 45rpx;
  margin: 0 10rpx;
}

.btn-group {
  height: 90rpx;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}

.refuse-btn {
  border: #f54831 2rpx solid;
  color: #f54831;
}

.accept-btn {
  background-color: #0f76bc;
  color: #fff;
}

.reply-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.reply-btn {
  width: 710rpx;
  padding: 20rpx 0;
  text-align: center;
  border-radius: 40rpx;
  background-color: #0f76bc;
  font-size: 32rpx;
  color: #fff;
}

.popup-box {
  padding: 20rpx;
}

.popup-top {
  font-size: 33rpx;
  padding: 30rpx;
  text-align: center;
}

.text-area {
  height: 120rpx;
  background-color: #f5f5f5;
}

.popup-tip {
  margin: 10rpx 0;
  color: #999999;
}

.popup-btn {
  width: 560rpx;
  padding: 20rpx 0;
  font-size: 33rpx;
  color: #fff;
  text-align: center;
  background-color: #0f76bc;
  border-radius: 15rpx;
  margin-top: 100rpx;
}
</style>
